{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
	<link href="{{ asset('bundles/applicationbootstrap/css/fonts/font-awesome/font-awesome.css') }}" rel="stylesheet" type="text/css" media="all" />
	
	<link href="{{ asset('bundles/applicationbootstrap/css/forms/toggle-switch/toggle-switch.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="page-header">
          <h1>Toggles and rating</h1>
          <p>Nie działa w IE8 i IE7</p>
        </div>
        <div class="row">
            <div class="col-lg-6">
                <form role="form" class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-sm-3">Inline Radio Buttons</label>
                        <div class="col-sm-9">
	                        <div class="btn-group" data-toggle="buttons">
	                          <label class="btn btn-success active">
	                            <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1
	                          </label>
	                          <label class="btn btn-success">
	                            <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
	                          </label>
	                          <label class="btn btn-success">
	                            <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
	                          </label>
	                          <label class="btn btn-success">
	                            <input type="radio" name="options" id="option4" autocomplete="off"> Radio 4
	                          </label>
	                        </div>
                        </div>
                    </div>
                </form>
                <form role="form" class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-sm-3">Vertical Radio Buttons</label>
                        <div class="col-sm-9">
	                        <div class="btn-group-vertical" data-toggle="buttons">
	                          <label class="btn btn-success active">
	                            <input type="radio" name="options-vertical" id="option1" autocomplete="off" checked> Radio 1
	                          </label>
	                          <label class="btn btn-success">
	                            <input type="radio" name="options-vertical" id="option2" autocomplete="off"> Radio 2
	                          </label>
	                          <label class="btn btn-success">
	                            <input type="radio" name="options-vertical" id="option3" autocomplete="off"> Radio 3
	                          </label>
	                          <label class="btn btn-success">
	                            <input type="radio" name="options-vertical" id="option4" autocomplete="off"> Radio 4
	                          </label>
	                        </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-lg-6">
                <form role="form" class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-sm-3">Inline Checkboxes</label>
                        <div class="col-sm-9">
	                        <div class="btn-group" data-toggle="buttons">
	                          <label class="btn btn-info active">
	                            <input type="checkbox" autocomplete="off" checked> Checkbox 1
	                          </label>
	                          <label class="btn btn-info">
	                            <input type="checkbox" autocomplete="off"> Checkbox 2
	                          </label>
	                          <label class="btn btn-info">
	                            <input type="checkbox" autocomplete="off"> Checkbox 3
	                          </label>
	                          <label class="btn btn-info">
	                            <input type="checkbox" autocomplete="off"> Checkbox 4
	                          </label>
	                        </div>
                        </div>
                    </div>
                </form>
                <form role="form" class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-sm-3">Vertical Checkboxes</label>
                        <div class="col-sm-9">
	                        <div class="btn-group-vertical" data-toggle="buttons">
	                          <label class="btn btn-info active">
	                            <input type="checkbox" autocomplete="off" checked> Checkbox 1
	                          </label>
	                          <label class="btn btn-info">
	                            <input type="checkbox" autocomplete="off"> Checkbox 2
	                          </label>
	                          <label class="btn btn-info">
	                            <input type="checkbox" autocomplete="off"> Checkbox 3
	                          </label>
	                          <label class="btn btn-info">
	                            <input type="checkbox" autocomplete="off"> Checkbox 4
	                          </label>
	                        </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
            	<form role="form">
        			<div class="form-group">
						<h4>Toggle checkbox</h4>
						<div class="row">
							<div class="col-xs-2">
								<div class="toggle-switch">
									<label>
										<input type="checkbox" value="" checked>
										<div class="toggle-switch-inner"></div>
										<div class="toggle-switch-switch"><i class="fa fa-check"></i></div>
									</label>
								</div>
							</div>
							<div class="col-xs-2">
								<div class="toggle-switch toggle-switch-danger">
									<label>
										<input type="checkbox" value="" checked>
										<div class="toggle-switch-inner"></div>
										<div class="toggle-switch-switch"><i class="fa fa-check"></i></div>
									</label>
								</div>
							</div>
							<div class="col-xs-2">
								<div class="toggle-switch toggle-switch-warning">
									<label>
										<input type="checkbox" value="" checked>
										<div class="toggle-switch-inner"></div>
										<div class="toggle-switch-switch"><i class="fa fa-check"></i></div>
									</label>
								</div>
							</div>
							<div class="col-xs-2">
								<div class="toggle-switch toggle-switch-info">
									<label>
										<input type="checkbox" value="" checked>
										<div class="toggle-switch-inner"></div>
										<div class="toggle-switch-switch"><i class="fa fa-check"></i></div>
									</label>
								</div>
							</div>
							<div class="col-xs-2">
								<div class="toggle-switch toggle-switch-success">
									<label>
										<input type="checkbox" value="" checked>
										<div class="toggle-switch-inner"></div>
										<div class="toggle-switch-switch"><i class="fa fa-check"></i></div>
									</label>
								</div>
							</div>
							<div class="col-xs-2">
								<div class="toggle-switch toggle-switch-primary">
									<label>
										<input type="checkbox" value="" checked>
										<div class="toggle-switch-inner"></div>
										<div class="toggle-switch-switch"><i class="fa fa-check"></i></div>
									</label>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<h4>Toggle radio</h4>
						<div class="row">
						    <div class="col-xs-2">
								<div class="toggle-switch">
									<label>
										<input type="radio" name="toggle-switch" value="">
										<div class="toggle-switch-inner"></div>
										<div class="toggle-switch-switch"><i class="fa fa-check"></i></div>
									</label>
								</div>
						    </div>
						    <div class="col-xs-2">
								<div class="toggle-switch toggle-switch-danger">
									<label>
										<input type="radio" name="toggle-switch" value="">
										<div class="toggle-switch-inner"></div>
										<div class="toggle-switch-switch"><i class="fa fa-check"></i></div>
									</label>
								</div>
						    </div>
						    <div class="col-xs-2">
								<div class="toggle-switch toggle-switch-warning">
									<label>
										<input type="radio" name="toggle-switch" value="">
										<div class="toggle-switch-inner"></div>
										<div class="toggle-switch-switch"><i class="fa fa-check"></i></div>
									</label>
								</div>
						    </div>
						    <div class="col-xs-2">
								<div class="toggle-switch toggle-switch-info">
									<label>
										<input type="radio" name="toggle-switch" value="">
										<div class="toggle-switch-inner"></div>
										<div class="toggle-switch-switch"><i class="fa fa-check"></i></div>
									</label>
								</div>
						    </div>
						    <div class="col-xs-2">
								<div class="toggle-switch toggle-switch-success">
									<label>
										<input type="radio" name="toggle-switch" value="">
										<div class="toggle-switch-inner"></div>
										<div class="toggle-switch-switch"><i class="fa fa-check"></i></div>
									</label>
								</div>
						    </div>
						    <div class="col-xs-2">
								<div class="toggle-switch toggle-switch-primary">
									<label>
										<input type="radio" name="toggle-switch" value="">
										<div class="toggle-switch-inner"></div>
										<div class="toggle-switch-switch"><i class="fa fa-check"></i></div>
									</label>
								</div>
						    </div>
						</div>
					</div>
        		</form>
            </div>
        </div>
    </div> <!-- /container -->
{% endblock %}